<template>
    <div class="container">
        <div class="apply-container">
            <div class="apply-container-head"></div>
            <div class="apply-container-body">
                <div class="apply-container-body-title">
                    <div class="apply-container-body-title-font">您的维修申请已通过</div>
                    <div class="apply-container-body-title-return">
                        <el-button size="small" @click="goBackPage">返回</el-button>
                    </div>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="model-title">申请信息</div>
                <div class="apply-container-body-content">
                    <el-form :model="RepairOrder" label-width="110px" label-position="LabelPosition" disabled
                        style="width: 100%;">
                        <el-form-item label="姓名:" prop="InputUserName" style="width: 40%;">
                            <el-input v-model="RepairOrder.userName" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="工号:" prop="InputUserId" style="width: 40%;">
                            <el-input v-model="RepairOrder.userId" placeholder="请输入工号"></el-input>
                        </el-form-item>
                        <el-form-item label="申请人电话:" prop="InputUserPhone" style="width: 40%;">
                            <el-input v-model="RepairOrder.userPhone" placeholder="请输入申请人电话"></el-input>
                        </el-form-item>
                        <el-form-item label="车牌号:" prop="SelectAutoPlateNum" style="width: 40%;">
                            <el-select v-model="RepairOrder.autoPlateNum" placeholder="请选择车牌号"></el-select>
                        </el-form-item>
                        <el-form-item label="维修类型:" prop="SelectAutoRepairType" style="width: 40%;">
                            <el-select v-model="RepairOrder.autoRepairType" placeholder="请选择维修类型"></el-select>
                        </el-form-item>
                        <el-form-item label="维修描述:" prop="InputRepairDescribe" style="width: 50%;">
                            <el-input v-model="RepairOrder.repairDescribe" type="textarea" placeholder="请输入内容"
                                maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="维修厂:" prop="SelectRepairFactory" style="width: 40%;">
                            <el-select v-model="RepairOrder.repairFactory" placeholder="请选择车牌号"></el-select>
                        </el-form-item>
                        <el-form-item label="送修日期:" prop="RepairStartTime" style="width: 40%;">
                            <el-date-picker v-model="RepairOrder.repairStartTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择取车时间"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="期望取车时间:" prop="RepairEndTime" style="width: 40%;">
                            <el-date-picker v-model="RepairOrder.repairEndTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择期望取车时间"></el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider class="apply-container-body-title-line"></el-divider>
                <div class="model-title">审批意见</div>
                <div class="apply-container-body-approval">
                    <el-form :model="Approval" label-width="100px" label-position="LabelPosition" style="width: 100%;">
                        <el-form-item label="审批人:" prop="OrderApprover" style="width: 22%;">
                            <el-radio-group v-model="Approval.OrderApprover" disabled>
                                <el-radio :label="Approval.OrderApprover"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="审批意见:" prop="ApprovalResult" style="width: 40%;">
                            <el-radio-group v-model="Approval.ApprovalResult" disabled>
                                <el-radio label="同意" value="同意"></el-radio>
                                <el-radio label="不同意" value="不同意"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="审批备注:" prop="ApprovalDescribe" style="width: 50%;">
                            <el-input v-model="Approval.ApprovalDescribe" type="textarea" placeholder="请输入内容" disabled
                                maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                        <div class="apply-container-body-content-submit">
                            <el-button type="primary" @click="Submit">提交</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
            <div class="apply-container-footer"></div>
        </div>
    </div>
</template>
  
<script>
import { getRepairOrderById } from '@/api/approval.js'
import { updateRepairOrderProgress } from '@/api/application.js'
import { updateRepairOrderStatusDone } from '@/api/application.js'
import { updateTodoStatus } from '@/api/todo.js';
import { getRepairGeneralApproval } from '@/api/approval.js'
export default {
    name: 'RepairApplicationApprovedView',
    data() {
        return {
            LabelPosition: 'right',
            RepairOrder: {
                userName: null,
                userId: null,
                userPhone: null,
                autoPlateNum: null,
                autoRepairType: null,
                repairDescribe: null,
                repairFactory: null,
                repairStartTime: null,
                repairEndTime: null,
            },
            Approval: {
                OrderApprover: null,
                ApprovalResult: null,
                ApprovalDescribe: null,
            },
            RepairOrderId: null, //待办转入
            UserId: null,
            RepairOrderProgress: 3,
            TodoType: "维修通知",
            SubmitCode: [],
        }
    },

    methods: {
        GetRepairOrderById() {
            return new Promise((resolve, reject) => {
                getRepairOrderById(this.RepairOrderId)
                    .then(res => {
                        this.RepairOrder = res.data.data;
                        if (res.data.code === '0') {
                            console.log(res.data.code);
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    })
            });
        },
        //获取综合办审批数据
        GetRepairGeneralApproval() {
            return new Promise((resolve, reject) => {
                getRepairGeneralApproval(this.RepairOrderId)
                    .then(res => {
                        if (res.data.code === '0') {
                            this.ApprovalData = res.data.data;
                            this.Approval.OrderApprover = this.ApprovalData.orderApprover
                            this.Approval.ApprovalResult = this.ApprovalData.approvalResult
                            this.Approval.ApprovalDescribe = this.ApprovalData.approvalDescribe
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    })
            });
        },
        UpdateRepairOrderProgress() {
            return new Promise((resolve, reject) => {
                updateRepairOrderProgress(this.RepairOrderId, this.RepairOrderProgress)
                    .then(res => {
                        this.SubmitCode.push(res.data.code);
                        if (res.data.code === '0') {
                            console.log(res.data.code);
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    });
            });
        },
        UpdateTodoStatus() {
            return new Promise((resolve, reject) => {
                updateTodoStatus(this.TodoType, this.RepairOrderId)
                    .then(res => {
                        this.SubmitCode.push(res.data.code);
                        if (res.data.code === '0') {
                            console.log(res.data.code);
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    });
            });
        },
        UpdateRepairOrderStatusDone() {
            return new Promise((resolve, reject) => {
                updateRepairOrderStatusDone(this.RepairOrderId)
                    .then(res => {
                        this.SubmitCode.push(res.data.code);
                        if (res.data.code === '0') {
                            console.log(res.data.code);
                            resolve(); // 表示异步操作成功
                        } else {
                            console.log(res.data.msg);
                            reject(res.data.msg); // 表示异步操作失败
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err); // 处理异步错误
                    });
            });
        },
        //检错，可复用
        JudgeSubmitCode(data) {
            const allZeros = data.every(code => code === '0');
            return allZeros;
        },
        showMessage(message, type) {
            this.$message({
                message: message,
                duration: 2000,
                showClose: true,
                type: type,
            });
        },
        goBackPage() {
            this.$router.go(-1)
        },
        JudgeSuccess(data) {
            if (this.JudgeSubmitCode(data)) {
                this.showMessage('已确认', 'success');
                this.goBackPage();
            } else
                this.showMessage('确认失败!', 'error');
        },
        Submit() {
            this.$confirm('此操作将对此维修通知进行确认, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.UpdateRepairOrderProgress()
                    .then(() => this.UpdateTodoStatus())
                    .then(() => this.UpdateRepairOrderStatusDone())
                    .then(() => this.JudgeSuccess(this.SubmitCode))
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        InitData() {
            return new Promise((resolve, reject) => {
                try {
                    this.RepairOrderId = this.$route.query.OrderId;
                    console.log(this.RepairOrderId)
                    resolve(); // 表示异步操作成功
                } catch (error) {
                    console.log(error);
                    reject(error); // 处理异步错误
                }
            });
        },
    },

    created() {
        this.InitData()
            .then(() => this.GetRepairOrderById())
            .then(() => this.GetRepairGeneralApproval())
    },
}
</script>
  
<style scoped>
.container {
    /* height: 100%; */
    width: 95%;
    margin: 0 auto;
    margin-top: 1%;
    background-color: #ffffff;
}

.apply-container {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.apply-container-head {
    width: 95%;
    height: 30px;
    margin: 0 auto;
}

.apply-container-body {
    width: 95%;
    height: 92%;
    margin: 0 auto;
    background-color: #ffffff;

}

.apply-container-body-title {
    width: 98%;
    height: 5%;
    margin: 0 auto;
    display: flex;
}

.apply-container-body-title-return {
    width: 100%;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.apply-container-body-title-line {
    height: 1px;
    width: 98%;
    margin: 5px auto;
}

.apply-container-body-title-font {
    width: 100%;
    height: 99%;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding-top: 10px;
}

.apply-container-body-content {
    width: 85%;
    height: 60%;
    margin: 20px auto;
    display: flex;

}

.apply-container-body-content-submit {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.apply-container-body-approval {
    width: 85%;
    height: 40%;
    margin: 20px auto;
    display: flex;

}

.apply-container-footer {
    width: 95%;
    height: 10px;
    margin: 0 auto;
}

.model-title {
    font-weight: bold;
}
</style>